<template>
  <div>
    
    <a-modal
      :title="title"
      :width="1200"
      :visible="visible"
      :confirmLoading="confirmLoading"
      :footer="null"
      @ok="handleSubmit"
      @cancel="handleCancel">
      
      <a-card :bordered="false">
        <s-table
          ref="table"
          size="default"
          :columns="columns"
          :data="loadData"
          :alert="true"
          :scroll="{
        x: 1200
      }"
          :showPagination="false"
          rowKey="id"
        >
            <span slot="materialName" slot-scope="text, record">
          {{ record.material ? record.material.materialName : '' }}
        </span>
          
          <span slot="materialModelNumber" slot-scope="text, record">
          {{ record.material ? record.material.materialModelNumber : '' }}
        </span>
          <span slot="image" slot-scope="text,record">
              <!-- <viewer v-if="record.material">
                <img
                  v-for="(item, index) in record.material.image.split(',')"
                  v-show="index==0"
                  :key="index"
                  style="width:45px; height:45px" :src="`${$store.state.baseUrl}/sysFileInfo/preview?id=${item}`"
                  alt=""
                />
              </viewer> -->
							<image-preview :images="record.material.image" />
            </span>
          <span slot="materialCode" slot-scope="text, record">
          {{ record.material ? record.material.materialCode : '' }}
        </span>
        </s-table>
      
      </a-card>
    </a-modal>
  </div>

</template>

<script lang="ts">
import {Component, Vue, Ref} from "vue-property-decorator";
import {STable} from '@/components'

import {
  emsPlanOrderMaterialPage,
} from '@/api/modular/main/emsordermaterial/emsOrderMaterialManage.js'

@Component({
  components: {
    STable,
  }
})
export default class EmsMaterialBackStoreDetailPlanModal extends Vue {
  @Ref() readonly table!: any
  
  visible = false
  title = '退库单详情'
  confirmLoading = false
  // 查询参数
  queryParam = {
    materialType: '',
    planOrderId: '',
    pageSize: undefined,
  }
  columns = [
    
    {
      align: 'center',
      title: '产品',
      dataIndex: '',
      customRender() {
        return '/'
      }
    }, {
      align: 'center',
      title: 'BOM',
      dataIndex: '',
      customRender() {
        return '/'
      }
    }, {
      title: '物料',
      dataIndex: 'materialName',
      scopedSlots: {customRender: 'materialName'}
      
    }, {
      title: '规格',
      dataIndex: 'materialModelNumber',
      scopedSlots: {customRender: 'materialModelNumber'}
    }, {
      title: '图片',
      dataIndex: '',
      scopedSlots: {customRender: 'image'}
      
    }, {
      title: '物号',
      dataIndex: '',
      scopedSlots: {customRender: 'materialCode'}
    }, {
      title: '关联单号',
      dataIndex: 'orderNumber'
    },
    {
      title: '正常退库数量',
      dataIndex: 'number'
    }, {
      title: '额外退库数量',
      dataIndex: 'extraNumber'
    },
  
  ]
  
  emsOrder = {}
  materialType = this.$businessEnum.MATERIAL_TYPE_ENUM.packing.id
  
  
  loadData(parameter: { pageNo: number, pageSize: number }) {
    this.queryParam.materialType = this.materialType
    
    const params = {
      ...parameter,
      ...this.queryParam,
    }
    return emsPlanOrderMaterialPage(params).then((res) => {
      return res.data
    })
  }
  
  
  show(record) {
    this.visible = true
    this.emsOrder = record
    this.queryParam.planOrderId = record.orderId
    this.queryParam.pageSize = -1
    
    setTimeout(() => {
      this.handleOk()
    }, 100)
  }
  
  handleOk() {
    this.table.refresh()
  }
  
  handleSubmit() {
    this.visible = false
  }
  
  handleCancel() {
    this.visible = false
  }
  
  
}
</script>

<style lang="less">
.table-operator {
  margin-bottom: 18px;
}

button {
  margin-right: 8px;
}
</style>
